<template>
    <RecycleScroller ref="scroller" class="message-scroller" :items="messages" sizeField="size"
        v-slot="{ item, index }">
        <div class="message-item">
            <el-tag class="message-time">{{ formatTime(item.timestamp) }}</el-tag>
            <div class="message-content">{{ item.content }}</div>
        </div>
    </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
export default {
    name: "MessageScroller",
    data() {
        return {
            userScrolledUp: false,
        }
    },
    components: {
        RecycleScroller
    },

    props: {
        messages: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    watch: {
        messages: function (val) {
            if (!this.userScrolledUp) {
                this.scrollToBottom()
            }
        }
    },
    mounted() {
        this.$refs.scroller.$el.addEventListener("scroll", this.handleScroll);
    },
    beforeDestroy() {
        this.$refs.scroller.$el.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        scrollToBottom() {
            this.$nextTick(() => {
                const scroller = this.$refs.scroller
                if (!scroller) return
                // 获取实际的DOM容器
                const scrollContainer = scroller.$el || scroller.$el.querySelector('.vue-recycle-scroller')
                // 使用原生DOM方法滚动到底部
                if (scrollContainer) {
                    scrollContainer.scrollTop = scrollContainer.scrollHeight
                }
            })
        },

        handleScroll() {
            const scroller = this.$refs.scroller
            if (!scroller) return
            const scrollContainer = scroller.$el || scroller.$el.querySelector('.vue-recycle-scroller')
            if (!scrollContainer) return
            const bottomOffset = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight
            this.userScrolledUp = bottomOffset > 10
        },

        formatTime(timestamp) {
            return timestamp.toLocaleTimeString()
        },
    }

}
</script>

<style lang="scss" scoped>
.message-scroller {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 10px;

    // ::v-deep .vue-recycle-scroller__item-wrapper {
    //     min-height: -webkit-fill-available !important;
    // }

    .message-item {
        opacity: 1;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;

        .message-time {
            margin-right: 10px;
            flex-shrink: 0;
        }

        .message-content {
            font-size: 12px;
            color: var(--app-primary-base);
            background-color: var(--app-primary-8);
            border-radius: 6px !important;
            border: 1px solid var(--app-primary-8);
            padding: 0 4px;
        }
    }
}
</style>